<template>
  <view class="content">
    <view class="back" :style="{top: statusBarHeight + 'px'}" @click="$ui.back()"></view>
    <view class="bg-content">
      <view class="qrcode">
         <u-qrcode ref="qr1" canvas-id="qr1" :value="img_url" :size="size" @click="remake('qr1')" @complete="complete($event, 'qr1')"></u-qrcode>
         <!-- <button class="save" type="primary" size="mini" @click="save('qr1')">保存</button> -->
         <button class="save" type="primary" size="mini" @click="copy">复制邀请码</button>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getShareImg
  } from '@/api/mine/friend.js'
  import uQRCode from '../../../uni_modules/Sansnn-uQRCode/js_sdk/u-qrcode';
  import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
  export default {
    data() {
      return {
        img_url: '',
        guid:'',
        size: 100,
        statusBarHeight: 0
      }
    },
    onLoad() {
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 5;
      this.getFriend()
    },
    methods: {
      // 获取邀请好友接口
      getFriend(){
      	// 调用接口
      	getShareImg({
      	}).then(res => {
      		console.log('这是成功res=',res)
          this.guid = res.data.guid
          this.img_url = res.data.img_url
      	}).catch((e) => {
      	})
      },
      complete(e, refName) {
        if (e.success) {
          console.log(refName + '生成成功');
        } else {
          console.log(refName + '生成失败');
        }
      },
      remake(refName) {
        const ref = this.$refs[refName];
        /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
        if (Array.isArray(ref)) {
          ref[0].remake();
        } else {
          ref.remake();
        }
      },
      save(refName) {
        uni.showLoading({
          title: '保存中',
          mask: true
        });
        const ref = this.$refs[refName];
        /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
        if (Array.isArray(ref)) {
          ref[0].save({
            success: res => {
              uni.hideLoading();
              uni.showToast({
                icon: 'success',
                title: '保存成功'
              });
            },
            fail: err => {
              uni.showToast({
                icon: 'none',
                title: JSON.stringify(err)
              });
            }
          });
        } else {
          ref.save({
            success: res => {
              uni.hideLoading();
              uni.showToast({
                icon: 'success',
                title: '保存成功'
              });
            },
            fail: err => {
              uni.showToast({
                icon: 'none',
                title: JSON.stringify(err)
              });
            }
          });
        }
      },
      // 点击复制
       copy() {
          uniCopy({
              content:this.guid,
              success:(res)=>{
                  uni.showToast({
                      title: '内容已复制到剪切板！',
                      // icon: 'none'
                  })
              },
              error:(e)=>{
                  uni.showToast({
                      title: e,
                      icon: 'none',
                      duration:3000,
                  })
              }
          })
      }
    }
  }
</script>

<style scoped lang="less">
  .content{
    .bg-content{
      width: 100%;
      height: 100vh;
      background-image: url('@/static/mine/friend/invi-img-bg.jpg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;
    }
    .qrcode {
      position: absolute;
      // top:920rpx;
      // left: 454rpx;
      top: 56%;
      left: 454rpx;
      background-color: #ffffff;
      width: 200rpx;
      height: 200rpx;
    }
    .save{
      width: 200rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 20rpx;
      color: #fff;
      background: linear-gradient(90deg,#69e49b 0,#3caf5e 50%,#51b760);
      border-radius: 45rpx;
      margin-top: 10rpx;
    }
  }
  .back {
    position: fixed;
    left: 24rpx;
    width: 100rpx; //大小是153px
    height: 100rpx;
    background-image: url('@/static/mine/game/back.png');
    background-size: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
  }
</style>